<template>
	<view class="main-content">
		<view class="main-body">
			<view class="icon-block mt-20">
			  <view class="msg" style="margin-bottom: -30rpx;">
			    <view class="msg-tjbody">
			      <view class="msg-tjbody__header">
			        <view>{{ monthData }}月汇总</view>
			      </view>
			    </view>
			  </view>
			  <view class="icon-list">
			  	<view class="icon-tjitem">
			  	  <view class="msg-tjtitle">{{ lateTime }}</view>
			  		<view class="msg-body__content">迟到(次)</view>
			  	</view>
			  	<view class="icon-tjitem">
			  	  <view class="msg-tjtitle">{{ workCount }}</view>
			  	<view class="msg-body__content">出勤(次)</view>
			  	</view>
				<!-- <view class="icon-tjitem">
				  <view class="msg-tjtitle">0</view>
				<view class="msg-body__content">旷工(次)</view>
				</view> -->
			  </view>
			</view>
			
			<view class="icon-dk mt-20" style="height: 1250rpx;">
				<view class="content-body">
				    <ren-calendar ref='ren' :open="false" :lateddates="lateddates" :markDays='markDays' @onDayClick='onDayClick' v-on:getYearMonth="renYearMonthData" ></ren-calendar>
				    <!-- <view class="change">选中日期：{{curDate}}</view> -->
				</view>
				<!-- <u-divider :dot="true"></u-divider> -->
				<!-- <view style="margin-left: 30rpx;font-size: 28rpx;color: rgba(39, 40, 50, 0.6);">
					规则: 固定上下班 B 08:30-17:30
				</view> -->
				<view style="margin-left: 30rpx;font-size: 28rpx;color: rgba(39, 40, 50, 0.6);">
					当日班次：固定上下班 {{ workClass }}
				</view>
				<!-- <view style="margin-left: 30rpx;font-size: 28rpx;color: rgba(39, 40, 50, 0.6);" v-if="isWork===true">
					出勤统计：打卡{{clockTimes}}次，工时{{workHours}}小时
				</view>
				<view style="margin-left: 30rpx;font-size: 28rpx;color: rgba(39, 40, 50, 0.6);" v-if="isWork===false">
					出勤统计：打卡0次
				</view> -->
				<view style="margin: 30rpx 30rpx;">
					<u-steps class="dk-steps" current="1" dot direction="column"  v-if="isFuture == false ">
						<u-steps-item :title="sbDkStatus" >
							<view slot="desc" class="desc" >
								<p class="desc-late-time" v-if="isBeginDk == true">{{ dakaShangBanTime }}</p>
								<p class="desc-late-warn" v-if="isBeginDk == true && isLate == '1'">迟到</p>
							</view>
						</u-steps-item>
						<u-steps-item :title="xbDkStatus" >
							<view slot="desc" class="desc">
								<p class="desc-late-time" v-if="isBeginDk == true && isEndDk == true">{{ dakaXiaBanTime }}</p>
								<p class="desc-late-warn" v-if="isBeginDk == true && isEndDk == true && isLeave != '0'">早退</p>
							</view>
						</u-steps-item>
					</u-steps>
					<!-- <u--image :showLoading="true" :src="src" width="80px" height="80px"></u--image> -->
					<view class="" v-if="isFuture == true">
						当天没有打卡记录
					</view>
					<!-- <view class="" v-if="isWork == false">
						好好休息
					</view> -->
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'
	import { getMonthList } from '@/api/kqdk.js'
	import { strFormatYearMonth, strFormatHourTime, strFormatMonth } from '@/utils/format.js'
	// import getDateTime from '@/utils/getdateTime.js' //获取当天时间
	export default {
		components:{ RenCalendar },
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		},
		data() {
			return {
				curDate:'',
				markDays:['2023-04-02','2023-05-04','2023-05-05','2023-05-06',,'2023-04-17'],
				lateddates:['2023-04-03','2023-05-03','2023-05-11'],
				normalDays: [],  //正常打卡
				dakaShangBanTime:'8:00',
				dakaXiaBanTime:'18:00',
				isFuture:false,
				isWork:true,
				// src:
				isBeginDk: false,  //上班是否打卡
				isEndDk: false,  //下班是否打卡
				lateTime: 0, //迟到次数
				workCount: 0,  //出勤次数
				monthData: '',  //月份
				workClass: ''  ,//上班时间
				isLate: '0',  //是否迟到
				isLeave: '0',  //是否早退
				sbDkStatus: '上班 未打卡',
				xbDkStatus:'下班 未打卡'
			}
		},
		mounted (){
			let today = this.$refs.ren.getToday().date;
			this.curDate = today;
			this.monthData = strFormatYearMonth(this.curDate).slice(-2)
			// uni.setStorageSync("todayDate",this.curDate)
			this.getMonthDkList(this.curDate)
			// this.timeDkShow(this.kqMonthInfo.data)
		},
		// onReady() {
		// 	let today = this.$refs.ren.getToday().date;
		// 	this.curDate = today;
		// 	this.markDays.push(today);
		// },
		methods: { 
			// 获取月份
			renYearMonthData(index, isFutureDay, yearToday) {
				this.monthData = strFormatYearMonth(index).slice(-2)
				this.getMonthDkList(index)
				this.isFuture = isFutureDay
				this.curDate = yearToday
				if( this.kqMonthInfo ){
					this.timeDkShow(this.kqMonthInfo.data)
				}
			},
			onDayClick(data){
				this.curDate = data.date;
				let clickY = this.curDate.slice(0,4)
				let clickM = this.curDate.slice(5,7)
				let clickD = this.curDate.slice(-2)
				this.isFuture = this.$refs.ren.isFutureDay(clickY,clickM,clickD)
				this.isWork = this.$refs.ren.isWorkDay(clickY,clickM,clickD)
				this.timeDkShow(this.kqMonthInfo.data)
			},
			// 获取月份考勤打卡情况列表
			async getMonthDkList(time) {
				let postTime = { month: strFormatYearMonth(time) }
				const { data } = await getMonthList(postTime)
				if( data.code === 200 ) {
					this.kqMonthInfo = data.data
					this.lateddates = this.kqMonthInfo.late
					this.markDays = this.kqMonthInfo.normal
					this.lateTime = this.kqMonthInfo.lateCount
					this.workCount = this.kqMonthInfo.workCount
					this.timeDkShow(this.kqMonthInfo.data)
					const oneData = this.kqMonthInfo.data.map(e=>e)[0]
					if( oneData ) {
						this.workClass = oneData.kqStartTime + "-" + oneData.kqEndTime
					}
				}
			},  
			// 判断是否打卡以及时间等
			timeDkShow(arr){
				this.dakaShangBanTime = ''
				this.dakaXiaBanTime = ''
				this.isEndDk = false
				this.isBeginDk = false
				this.isLate = '0'
				this.isLeave = '0'
				this.sbDkStatus = '上班 未打卡'
				this.xbDkStatus = '下班 未打卡'
				arr.forEach(e => {
					if( e.dateStr == this.curDate ) {
						if( e.beginTime ) {
							this.dakaShangBanTime = e.beginTime.slice(-8,-3)
							this.isBeginDk = true
							this.isLate = e.late
							this.sbDkStatus = '上班打卡'
						}
						if( e.endTime ) {
							this.dakaXiaBanTime = e.endTime.slice(-8,-3)
							this.isEndDk = true
							this.isLeave = e.leave
							this.xbDkStatus = '下班打卡'
						}
					}
				})
			}
		},
		
	}
</script>

<style lang="scss" scoped>
@import "./index.scss";

// steps的文字样式
/deep/.u-text__value--content {
	color: #303133 !important;
	font-size: 14px !important;
}
// 统计页面 steps的线条长度
/deep/.u-steps-item__line {
	height: 100% !important;
}
</style>
